import { Button } from 'antd';
import type { ReactElement } from 'react';
import React, { useImperativeHandle, useRef } from 'react';

import { RollbackOutlined, SaveOutlined } from '@ant-design/icons';
import { BetaSchemaForm } from '@ant-design/pro-components';

import type {
  FormInstance,
  ProFormColumnsType,
} from '@ant-design/pro-components';
import type { Bean } from '../../interface';
import type { ProColumns } from '@ant-design/pro-components';

type DetailFormTitleType = {
  add: string;
  modify: string;
  detail: string;
};

export type DetailFormLayoutType = 'DrawerForm' | 'ModalForm';

export interface DetailFormRef {
  triggerOpen: () => void;
  formRef: React.MutableRefObject<FormInstance<any> | undefined>;
  btnTriggerRef: React.RefObject<HTMLElement>;
  type: keyof DetailFormTitleType;
}

interface DetailFormProps<TData extends Bean = Bean> {
  // formProps: Partial<BetaSchema>;
  formProps: Partial<any>;
  hideTrigger: boolean;
  type: keyof DetailFormTitleType;
  columns?: ProColumns[];
  onFinish?: (formData: TData, config: DetailFormRef) => Promise<void>;
  selectedRecord?: TData;
  detailFormLayoutType?: DetailFormLayoutType;
}

enum enumDetailFormTitle {
  add = '添 加',
  modify = '编 辑',
  detail = '详 情',
}

const DetailForm = React.forwardRef((props: DetailFormProps, ref) => {
  const {
    formProps,
    type,
    columns = [],
    onFinish,
    hideTrigger,
    detailFormLayoutType = 'DrawerForm',
  } = props;
  const formRef = useRef<FormInstance>();
  const btnTriggerRef = useRef<HTMLDivElement>(null);

  const triggerOpen = () => {
    btnTriggerRef.current?.click();
  };

  const detailFormRef: DetailFormRef = {
    triggerOpen,
    formRef,
    btnTriggerRef,
    type,
  };

  useImperativeHandle(ref, () => {
    return detailFormRef;
  });
  const handleFinish = async (formData: Bean) => {
    if (typeof onFinish === 'function') {
      await onFinish(formData, detailFormRef);
    }
  };
  return (
    <BetaSchemaForm
      submitter={{
        render: (submitterProps: any) => {
          return [
            <Button
              type="default"
              key="rest"
              onClick={() => {
                submitterProps.form?.resetFields();
                triggerOpen();
              }}
              icon={<RollbackOutlined />}
            >
              返回
            </Button>,
            <Button
              type="primary"
              key="submit"
              icon={<SaveOutlined />}
              onClick={() => submitterProps.form?.submit?.()}
            >
              确定
            </Button>,
          ];
        },
      }}
      formRef={formRef}
      columns={columns as ProFormColumnsType[]}
      onFinish={handleFinish}
      layoutType={detailFormLayoutType}
      title={enumDetailFormTitle[type]}
      trigger={
        <span
          ref={btnTriggerRef}
          className={hideTrigger ? 'text-hidden' : 'text-block'}
          style={{ display: 'none' } as React.CSSProperties}
        >
          add
        </span>
      }
      layout="horizontal"
      {...formProps}
    ></BetaSchemaForm>
  );
});

DetailForm.displayName = 'DetailForm';

export default DetailForm;
